<template>
	<view>
		<view class="swiper">
			<Swiper :list="list4" keyName="url" @click="previewImage" @change="changeSwiper" @fullScreen='fullScreen' radius="0" height="270"
				:circular="true" @paly="paly">
			</Swiper>
			<view class="detail-pagenum" v-if="isPlay">{{current}}/{{list4.length}}</view>
		</view>
		<view class="wid100 bg-white position-absolute"
			style="border-radius: 100rpx 100rpx 0px 0px;top:260px;height: 10px;"></view>
		<view class="px-3 pb-3 wid100 box-b flex flex-column">
			<text class="font-36 fwb cl-21 mb-2">{{detail.title}}</text>
			<view class="flex justify-between align-center" style="padding-bottom: 28rpx;">
				<view class="flex align-end">
					<text class="font-24 fw5" style="color: #C40E0E;">{{detail.currency}}</text>
					<text class="font-36 fw5"
						style="color: #C40E0E;margin-left: 6rpx;margin-right: 6rpx;">{{detail.price}}</text>
					<text class="font-24 fw4 cl-88">/周</text>
				</view>
			</view>


			<view class="wid100 rounded-10 px-3 py-4 box-b" style="background: #FBFBFB;">
				<view class="flex justify-between align-center">
					<text class="left">面积：<text class="right">{{detail.size}}㎡</text> </text>
					<view class="wid50">
						<text class="left">楼层：<text class="right">{{detail.floor}}</text> </text>
					</view>
				</view>
				<view class="flex justify-between align-center mt-4 mb-4">
					<text class="left">卫生间：<text class="right">{{detail.toilet}}</text> </text>
					<view class="wid50">
						<text class="left">套间人数：<text class="right">{{detail.resident}}人</text> </text>
					</view>
				</view>
				<view class="flex align-center">
					<text class="left">床：<text class="right">{{detail.bed}}</text> </text>
				</view>
			</view>

			<view class="text-justify wid100 px-3 py-3 box-b font-26 fw4 cl-74 lh40">
				说明：只能以周为单位出租，不同租住时长单周价格不同，若有疑问，请联系客服咨询。
			</view>



		</view>
		<u-gap height="10" bgColor="#f3f3f3"></u-gap>

		<view class="flex justify-between mt-3 px-3 mb-3">
			<text class="font-36 fwb cl-21">可选租期</text>
			<text></text>
		</view>
		<view class="flex flex-column px-3 box-b rounded-20 ml-3 mb-3 room-list">
			<view v-for="(item,index) in detail.lease" :key="index"
				class="flex flex-column justify-between py-3 border-bottom" style="height: 100rpx;">
				<view class="flex justify-between align-center">
					<text class="font-32 fw5 cl-21 lh36">租期：{{item.title}}</text>
					<text class="font-24 fw4 cl-77">可入住：{{item.checkintime}}</text>
				</view>
				<view class="flex justify-between align-center">

					<view class="flex align-end">
						<text class="font-24 fw5" style="color:#9F5B00;">{{detail.currency}}</text>
						<text class="font-30 fw5"
							style="color: #9F5B00;margin-left: 6rpx;margin-right: 6rpx;">{{item.rent}}</text>
						<text class="font-24 fw4 cl-88">/周</text>
					</view>
					<view v-if="item.state == 1" class="flex align-center py-1 px-2 rounded-10 mr-1 mb-1 rounded-30"
						:style="{backgroundColor:'#FFB24B'}" @tap="toApply(item)">
						<text class="font-24" :style="{color:'#fff'}">申请预定</text>
					</view>
					<view v-else class="flex align-center py-1 px-2 rounded-10 mr-1 mb-1 rounded-30"
						:style="{backgroundColor:'#bfbfbf'}" @tap="toPApply(item)">
						<text class="font-24" :style="{color:'#fff'}">已租满，去排队</text>
					</view>
				</view>
			</view>
		</view>

		<u-gap height="10" bgColor="#f3f3f3"></u-gap>


		<view class="flex justify-between mt-3 px-3 mb-2">
			<text class="font-36 fwb cl-21">房间设施</text>
			<text></text>
		</view>
		<view class="wid100 box-b px-3 py-3 flex flex-wrap">
			<view v-for="(item,index) in detail.facilitys" class="flex flex-column justify-center align-center"
				style="width:138rpx;">
				<image style="width: 48rpx;height: 48rpx;" :src="item.thumb" mode=""></image>
				<text class="font-26 fw4 cl-9c mt-2 mb-5">{{item.title}}</text>
			</view>
		</view>

		<u-gap height="80" bgColor="#fff"></u-gap>

		<!-- 底部浮动栏 -->
		<view class="position-fixed bottom-0 bg-white flex justify-between align-center pb-2"
			:style="{width:'750rpx',height:'120rpx',boxShadow: '0px -2rpx 2rpx rgba(84, 84, 84, 0.15)'}">
			<button open-type="contact" hover-class="none">
				<view class="flex ml-3">
					<image src="../../static/common/kefu.png" style="width: 60rpx;height: 60rpx;" class="" mode="">
					</image>
					<view class="ml-2">
						<view class="font-28 fw5 cl-44">米欧</view>
						<text class="font-24 fw4 cl-a5">租赁客服</text>
					</view>
				</view>
			</button>
			<button open-type="contact"  class="flex justify-center align-center rounded-50 mr-3"
				:style="{background:'#FFB24B',width:'280rpx',height:'72rpx',}">
				<text class="font-28 fw4" :style="{color:'#fff'}">咨询</text>
			</button>
		</view>
		
		
		
		<LoginPop></LoginPop>
	</view>
</template>

<script>
	import Swiper from '../../components/u-swiper/u-swiper.vue'
	export default {
		components: {
			Swiper
		},
		data() {
			return {
				currentNum: 0,
				list4: [],
				current: 1,
				isPlay: true,
				detail: {}
			}
		},
		onShareAppMessage(res) {
				console.log(res.target.dataset.obj.id)
				let that = this;
				let pathUrl = '/pages/index/community?id='+res.target.dataset.obj.id
				if (res.from === 'button') {
					return {
						title: res.target.dataset.obj.want_apartment_title,
						path: pathUrl
					};
				}
				
			},
		onLoad(option) {
			this.getData(option.id)
		},
		methods: {
			previewImage() {
						let photoList = this.list4.map(item => {
							return item.url;
						});
						uni.previewImage({
							current: this.current-1,
							urls: photoList
						});
					},
			//房源申请
			toApply(item) {
				if (uni.getStorageSync('userInfo')) {
					this.jump({
						url: `/pages/roomDetail/apply?id=${this.detail.id}&lease=${item.title}`
					})
				} else {
					this.$store.commit('openPop')
				}

			},
			toPApply(item){
				console.log(item)
				if (uni.getStorageSync('userInfo')) {
					this.jump({
						url: `/pages/roomDetail/pApply?id=${this.detail.id}&lease=${item.title}`
					})
				} else {
					this.$store.commit('openPop')
				}
			},
			changeSwiper(e) {
				this.current = e.detail.__args__[0].current + 1
			},
			fullScreen(e) {
				this.display = e.detail.__args__[0]
			},
			paly(e) {
				this.isPlay = e.detail.__args__[0]
			},
			scoreshopExchange() {
				// this.jump({
				// 	url: '/pages/roomDetail/apply'
				// })
			},
			getData(id) {
				this.$H.post(this.$api.get_room_detail, {
					id: id
				}, {
					token: false
				}).then(res => {
					console.log(res)
					this.detail = res.data
					const swiper = res.data.images.map(item => {
						return {
							url: item
						}
					})
					if (res.data.top_video) {
						this.list4 = [{
							url: res.data.top_video
						}, ...swiper]
					} else {
						this.list4 = [...swiper]
					}
					console.log(this.list4)
				})
			},
		}
	}
</script>

<style lang="scss">
	button::after{
	 	border: none;
		
	}
	button{
		background-color: #fff;
		padding-left:0;
		padding-right: 0;
		line-height: 1;
		margin:0;
	}
	
	map {
		width: 100%;
		height: 300rpx;
		margin-top: 30rpx;
	}

	page {
		background-color: #fff;

		.left {
			font-size: 28rpx;
			font-weight: 400;
			color: #747474
		}

		.right {
			font-size: 28rpx;
			font-weight: 400;
			color: #3B3B3B;
		}

		.swiper {
			position: relative;

			.detail-pagenum {
				position: absolute;
				right: 20rpx;
				bottom: 35rpx;
				color: #fff;
				display: flex;
				justify-content: center;
				border-radius: 20rpx;
				background: rgba(0, 0, 0, 0.3);
				font-size: 24rpx;
				padding: 6rpx 14rpx;
			}
		}

		.act_nav {
			font-size: 28rpx;
			font-weight: 500;
			color: #1C1C1C;
		}

		.nav {
			font-size: 24rpx;
			font-weight: 400;
			color: #404040;
		}

		.red-box {
			width: 100rpx;
			height: 16rpx;
			background: linear-gradient(90deg, #FFB24B 0%, rgba(255, 178, 75, 0.05) 100%);
			margin-top: -15rpx;
		}

		.room-list {
			background: #F5F8FB;
			width: 690rpx;
		}

		.room-list>view:last-child {
			border: none;
		}
	}
</style>
